<!--
 * @Author: ChunLai
 * @Date: 2022-10-25 11:24:53
 * @LastEditTime: 2025-11-25 14:17:15
 * @Description: 投保须知(新版--综合)
 * @FilePath: \01.latest-short-insure\src\views\index\components\InsureNewerKnow.vue
-->
<template>
  <div class="insure_know" v-if="knowList.length > 0 || filesLen > 0">
    <div class="sy-mode-head pdl14">
      <span class="sy-mode-head-label">投保须知</span>
    </div>
    <dl class="pdbt_14">
      <template v-if="knowList.length > 0">
        <dd v-for="item in knowList" :key="item.label">
          <span class="boxLabel">{{ item.label }}</span>
          <span class="boxCon" v-html="item.value"></span>
        </dd>
      </template>
      <div class="file-div ft_c6" v-if="filesLen > 0">
        投保前请您认真阅读
        <span
          class="ftc4"
          v-for="(item, index) in insureFilesList"
          :key="`link${item.fileName}`"
          @click="goReadPage(item)"
        >
          {{ getFileName(item, index) }}
        </span>
        ，请重点关注保险责任、免责条款、犹豫期、等待期、退保等关键信息并确保已完全理解。
      </div>
    </dl>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "InsureNewerKnow",
  data() {
    return {};
  },
  components: {},
  computed: {
    ...mapGetters({
      planModule: "home/planModule",
      comClauseList: "page/comClauseList",
      apiClauseList: "home/apiClauseList",
    }),
    knowList() {
      let res = [];
      const list = this.planModule.filter((ele) => ele.value);
      if (list && list.length > 0) {
        res = list;
      }
      return res;
    },
    insureFilesList() {
      let res = [];
      if (this.comClauseList.length > 0) {
        res = [...this.comClauseList];
      }
      if (this.apiClauseList.length > 0) {
        res = [...res, ...this.apiClauseList];
      }
      return res;
    },
    filesLen() {
      let res = 0;
      if (this.insureFilesList.length > 0) {
        res = this.insureFilesList.length;
      }
      return res;
    },
  },
  mounted() {},
  methods: {
    goReadPage(item) {
      if (!item.fileUrl) return this.$toast("未查询到文件");
      // 使用新版PDF展示页
      this.$router.push(`/read?ftype=${item.suffixType}&fid=${item.id}`);
    },
    getFileName(item, index) {
      let res = "",
        symbol = "",
        name = `${item.fileName}`;
      if (index != this.filesLen - 1) {
        symbol = "、";
      }
      if (item.fileName.indexOf("《") == -1) {
        name = `《${item.fileName}》`;
      }
      res = `${name}${symbol}`;
      return res;
    },
  },
};
</script>

<style lang="less" scoped>

.insure_know {
  font-size: 15px;
  background-color: #fff;

  dt {
    line-height: 1;
    color: #1b1b1b;
    font-size: 14px;
    font-weight: bold;
    padding: 20px 0;
    padding-left: 15px;
    background-color: #fff;
    position: relative;
    font-weight: bold;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      width: 3px;
      height: 18px;
      background-color: #d44438;
    }
  }

  dd {
    display: flex;
    align-items: center;
    font-size: 15px;
    padding: 0 14px;
    overflow: hidden;
    margin-bottom: 12px;
    .boxCon {
      flex: 1;
      flex-shrink: 0;
      color: #747474;
      padding-left: 30px;
      text-align: right;
    }
    .boxLabel {
      color: #343434;
    }
  }
}

.notice-tips {
  padding: 10px 14px 0;
  color: #2c3e50;
}

.file-div {
  padding: 0 12px;
  font-size: 14px;
  line-height: 26px;
  margin-top: 20px;

  .ftc4 {
    color: #e7a249;
  }
}
</style>
